<template>
  <div>
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>待开票收款合同
          </p>
        </div>
        <div class="topright">
          <!--<el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>返回
          </el-button>-->
          <el-button type="info" @click="$router.go(0)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>刷新
          </el-button>
        </div>
      </div>
    </div>
    <div class="component-listHeader">
      <div class="search-header">
        <div class="left-title">
          <p class="left-text">
            <span class="iconfont">&#xe61e;</span>
            待开票收款合同
          </p>
          <div class="right">
            <!-- <button  @click="add">添加</button> -->
          </div>
        </div>
      </div>
    </div>

    <div class="table">
      <el-table ref="multipleTable" :data="info" tooltip-effect="dark" border>
        <el-table-column label="时间" align="center" width="150" prop="createDate">
          <template slot-scope="scope">{{scope.row.time | dateFilter}}</template>
        </el-table-column>

        <el-table-column label="项目部" align="center" width="110" prop="name"></el-table-column>

        <el-table-column label="合同编号" align="center" width="110" prop="outNo"></el-table-column>

        <el-table-column label="合同金额" align="center" width="150" prop="money"></el-table-column>
        <el-table-column label="收款明细" align="center" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.source==1">预付款</div>
            <div v-if="scope.row.source==2">进度款</div>
            <div v-if="scope.row.source==3">初验款</div>
            <div v-if="scope.row.source==4">终验款</div>
          </template>
        </el-table-column>
        <el-table-column label="开票金额" align="center" width="150" prop="invMoney"></el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <a @click.prevent="check(scope.$index, scope.row)">查看详情</a>
            <a @click.prevent="detail(scope.$index, scope.row)">开票反馈</a>
          </template>
        </el-table-column>
      </el-table>
    </div>

<!-- 分页 -->
    <!--<div class="component-paging" v-if="info.length > 0">
      <div class="table-bottom">
        <div class="bottom-left"></div>
        <div class="paging">
          <div class="paging-left">
            <p>
              共
              <span>{{Math.ceil(total/pageSize)}}</span> 页/
              <span>{{total}}</span> 条数据
            </p>
          </div>
          <el-pagination
            background
            @size-change="SizeChange($event,dataInit,currentPage,pageSize)"
            @current-change="CurrentChange($event,dataInit,currentPage,pageSize)"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>-->

    <!--开票弹框-->
    <div class="component-model">
      <el-dialog title="开票请款" :visible.sync="ticket" width="950px">
        <div class="ticket_top">
          <div class="component-listHeader">
            <div class="search-header">
              <div class="left-title">
                <p class="left-text">
                  <span class="iconfont">&#xe61e;</span>
                  付款方信息
                </p>
                <div class="right"></div>
              </div>
            </div>
          </div>
          <div class="table"  style="width:900px;">
            <el-table ref="multipleTable" :data="list1" tooltip-effect="dark" border>
              <el-table-column label="认证单位名称" align="center" width="100" prop="name"></el-table-column>
              <el-table-column label="计量国税一般纳税人识别号单位" align="center" prop="taxNo"></el-table-column>
              <el-table-column label="地址" align="center" width="150" prop="addr"></el-table-column>
              <el-table-column label="电话" align="center" width="105" prop="tel"></el-table-column>
              <el-table-column label="开户行" align="center" width="130" prop="bank"></el-table-column>
              <el-table-column label="账号" align="center" width="200" prop="account"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="ticket_bottom">
          <div class="component-listHeader">
            <div class="search-header">
              <div class="left-title">
                <p class="left-text">
                  <span class="iconfont">&#xe61e;</span>
                  开票信息
                </p>
                <div class="right"></div>
              </div>
            </div>
          </div>

          <div class="table" style="width:900px;">
            <el-table ref="multipleTable" tooltip-effect="dark" border :data="list2">
              <el-table-column label="服务名称" align="center" prop="name"> </el-table-column>
              <el-table-column label="计量单位" align="center"prop="unit"></el-table-column>
              <el-table-column label="规格型号" align="center" prop="model"></el-table-column>
              <el-table-column label="数量" align="center" prop="num"></el-table-column>
              <el-table-column label="单价" align="center"prop="price"></el-table-column>
              <el-table-column label="金额" align="center" prop="money"></el-table-column>
              <el-table-column label="备注" align="center" prop="remark"></el-table-column>
              <el-table-column label="发票种类" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.type==0">增值税发票</div>
                  <div v-if="scope.row.type==2">普通发票</div>
                  <div v-if="scope.row.type==51">电子发票</div>
                </template>
              </el-table-column>
              <el-table-column label="税率" align="center" prop="taxrate"></el-table-column>
            </el-table>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="ticket = false">取消</el-button>
          <el-button @click="ticket = false;">确定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 开票反馈弹窗 -->
    <div class="component-model">
      <el-dialog title="开票反馈" :visible.sync="feedbackAlert" width="600px">
        <div class="hadRadio">
          <el-form
            ref="form"
            :model="ideaModel"
            label-width="100px"
            style="width:300px;margin:0 auto;"
          >
            <el-form-item label="开票状态：">
              <el-radio-group v-model="ideaModel.type" style="margin-left:-30px;">
                <el-radio :label="2">已开票</el-radio>
                <el-radio :label="3">未开票</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="运单号：">
              <el-input v-model="ideaModel.status" style="margin-left:20px;"></el-input>
            </el-form-item>

            <el-form-item label="发票号：">
              <el-input v-model="ideaModel.status1" style="margin-left:20px;"></el-input>
            </el-form-item>


            <!-- <el-form-item>
              <span class="demonstration">开票日期：</span>
              <el-date-picker
                v-model="ideaModel.status2"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
                default-time="00:00:00"
              ></el-date-picker>
            </el-form-item> -->
         <div class="spans" style="height: 60px;">
          <el-form-item label="签约时间：">

              <el-date-picker
                v-model="ideaModel.status2"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                default-time="00:00:00"
                value-format= "yyyy-MM-dd"
                style="margin-left:20px;width:200px"
              ></el-date-picker>

            </el-form-item>
           </div>

        <!-- 上传文件 -->

          <div class="uploads">
              <el-form-item label="发票扫描件：">
                <el-upload
                  class="upload-demo"
                  action="/api/web/sysFile/uploadFile"
                  :headers="myheader"
                  :data="exe_data"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :on-success="successFile"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="1"
                  accept=".jpg,.jpeg,.png,.pdf,.dwg,.xls,.xlsx,.doc,.docx,.JPG,.JPEG,.PNG,.PDF,.DWG,.XLS,.XLSX,.DOC,.DOCX,.zip,.rar"
                  :before-upload="beforeAvatarUpload"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                  <el-button size="small" type="primary">上传文件</el-button>
                  <div slot="tip" style="color: #ccc;" class="el-upload__tip">上传文件不能超过10MB</div>
                </el-upload>
              </el-form-item>
            </div>

            <el-form-item label="备注：" style="width:300px;height:80px">
              <textarea v-model="ideaModel.remark"
              style="margin-left:20px;
              resize:none;
              width:200px;
              height:60px;
              border-radius:5px;
              padding:5px;
              "
              placeholder="请输入备注">
              </textarea>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="feedbackAlert = false;">取消</el-button>
          <el-button @click="detailss()">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myheader:{token:localStorage.getItem("token")},
      exe_data:{'parentId':'','bizType':'ArrivalAccount'},
          // 上传文件
      fileCode: {},
      fileList: [],
      delFile:'',//删除文件
      FileObject: {
        bizType: "contract",
      },
      info: [],
      list1: [],
      list2:[],

      list11:[],

      total: 0,
      // 每页显示数据的条数
      pageSize: 10,
      // 当前显示的页面页码
      currentPage: 1,
      ticket: false, //查看请款弹框
      paySide: [], //查看弹窗的表单 - 付款人信息
      ticketInfo: [], //查看弹窗的table
      ideaModel: {
        show: false,
        remark: "",
        type: "",
        status: "",
        status1: "",
        status2: "",
        invNos: "",
        expressNos: ""
      },
      belongOrgName:"",
      invId:"",
      feedbackAlert:false,
    };
  },
  created() {
  },
  mounted() {
    this.dataInit();
  },
  methods: {

    //文件上传
    handleRemove(file, fileList) {
      let that = this;
      let suCb = function(res){
       that.fileList = []
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        parentId:that.$route.params.inId,
        fileUrl:that.delFile
      }
      let palyParam = {
        url: "/api/web/sysFile/deleteFile",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      return true;
//      this.$message.warning(`当前限制选择 1 个文件，请先删除再上传`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm('确认删除吗？');
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 10MB!');
      }
      return isLt2M;
    },
    successFile(response, file, fileList){
      this.delFile = file.response.fileUrl;
      this.fileList = fileList
    },
    // 合同渲染
    dataInit() {
      let that = this;
      let suCb = res => {
        console.log("获取成功");
        console.log(res.data.data);
        /*
        that.total = res.data.data.page.rowCount; // 分页*/
        that.info = res.data.data;
//        that.info.push(res.data.data.list[0].proContract)
      }
      let erCb = res => {
        console.log(res);
      }
      let params = {
       /* pageCurrent:that.currentPage+"",
        pageSize:that.pageSize+""*/
      }

      let req = {
        url: "/api/web/proInvoice/getWaitInvoice",
        methods: "post",
        data: params,
        success: suCb,
        error: erCb
      };
      console.log(that.currentPage)
      that.$https(req);
    },

    detail(index, row) {
      this.ideaModel = {};
      this.fileList = [];
      this.feedbackAlert = true;
      this.invNos = row.invId;
      this.expressNos = row.expressNo;
      this.exe_data.parentId = row.invId;
    },

    // 开票反馈
    detailss() {
      let params = {
        invId: this.invNos,
        expressNo: this.ideaModel.status,//运单号
        openRemark: this.ideaModel.remark,//开票反馈
        openStatus: this.ideaModel.type+"",//开票 或拒绝 开票-2，拒绝-3
        invNo: this.ideaModel.status1,//发票号
        openDate: this.ideaModel.status2,//开票日期 yyyy-MM-dd
        bizeType:"ArrivalAccount",
        parentId:this.invNos
        /*openStatus: this.ideaModel.type,//开票 或拒绝 开票-2，拒绝-3
        invNo: this.invNos,
        expressNo: this.expressNos,//运单号
        openRemark: this.ideaModel.remark,//开票反馈
        invId: this.invId,
        fileName: this.fileList,
        openDate: this.ideaModel.status2*/
      };
      let that = this;
      let suCb = res => {
        that.feedbackAlert = false;
        that.dataInit();
        this.ideaModel.remark= "";
        this.ideaModel.type= "";
        this.ideaModel.status= "";
        this.ideaModel.status1= "";
        this.ideaModel.status2= "";
        this.ideaModel.invNos= "";
        this.ideaModel.expressNos= "";
        console.log("请求反馈成功");
        console.log(res);
      };
      let erCb = res => {
        console.log(res);
      };

      let req = {
        url: "/api/web/proInvoice/toReplyProInvoicePay",
        methods: "post",
        data: params,
        success: suCb,
        error: erCb
      };
      that.$https(req);
    },



    // 查看详情
    check(index, row) {
      this.list1 = [];
      console.log(row);
      this.ticket = true;
      let params = {
        invId: row.invId
      };
      let that = this;
      let suCb = res => {
        console.log("请求成功");
        console.log(res.data.data);

        that.list1 = res.data.data != null ? that.list1.push(res.data.data) : [];
        that.list2 = res.data.data != null ? res.data.data.getinvoiceDetail : [];
      };
      let erCb = res => {
        console.log(res);
      };
      let req = {
        url: "/api/web/proInvoice/getinvoiceConfig",
        methods: "post",
        data: params,
        success: suCb,
        error: erCb
      };
      that.$https(req);
    }
  },
  watch: {}
};
</script>
<style scoped>
.component-listHeader .search-header {
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
  border-bottom: 0;
}

.component-listHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-listHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  line-height: 45px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-listHeader .search-header .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

.component-listHeader .search-header .right button {
  padding: 0 15px;
  height: 30px;
  width: 80px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 14px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
}

.component-listHeader .search-header .right button:hover {
  background-color: #f3f3f3;
}

.component-listHeader .search-header .right .right-select-margin {
  margin-top: 6px;
  margin-right: 8px;
}

.table {
  width: 1100px;
  margin: 0 auto;
}

.el-table .cell a {
  color: #1abc9a;
  text-decoration: none;
  cursor: pointer;
  margin-left: 5px;
}

.pro_gourp {
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  flex-direction: column;
}
.pro_gourp li {
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  line-height: 35px;
  height: 35px;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 20px;
}
.pro_gourp li .tips {
  position: absolute;
  top: 30px;
  left: 100px;
}

.pro_gourp li .tips .tips_arrow {
  width: 0;
  height: 0;
  border-width: 0 5px 7px;
  border-style: solid;
  border-color: transparent transparent #1abc9c;
  margin: 0 auto;
}

.pro_gourp li .tips .tips_text {
  font-size: 12px;
  color: #606266;
  line-height: 16px;
  width: 200px;
  text-align: center;
}

.pro_gourp li .totalPro {
  width: 50px;
  font-size: 14px;
  color: #606266;
  text-align: right;
}

.pro_gourp li button {
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 6.5px 20px;
  font-size: 14px;
  border-radius: 4px;
  margin-left: 20px;
}

.pro_gourp li button:hover {
  background: #1abc9c;
  border: 1px solid #1abc9c;
  color: #fff;
}

.component-model .component-listHeader .search-header {
  width: 900px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
  border-bottom: 0;
}

.component-model .component-listHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-model .component-listHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  line-height: 45px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-model .component-listHeader .search-header .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

.component-model .component-listHeader .search-header .right button {
  padding: 0 15px;
  height: 30px;
  width: 100px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 14px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
}

.component-model .component-listHeader .search-header .right button:hover {
  background-color: #f3f3f3;
}

.component-model
  .component-listHeader
  .search-header
  .right
  .right-select-margin {
  margin-top: 6px;
  margin-right: 8px;
}

.component-model .table {
  width: 100%;
  margin: 0 auto;
}
</style>
